<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp" %>
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>凯盛项目管理系统</title>
	<link rel="shortcut icon" href="../img/favicon.ico" >
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/jquery.atwho.css">
	<link rel="stylesheet" href="../css/bootstrap-responsive.css">
	<link rel="stylesheet" href="../css/docs.css">
	<style type="text/css">
		body{
			background:url(../img/b.png);
			
		}
		
	</style>
</head>
<body class="body">
	<% pageContext.setAttribute("left", "new"); %>
	<%@ include file="include/top.jsp" %>
	
	
	<div class="container" style="background: url(../img/c.png) repeat-y 970px 0;">
	  <div class="row">
		<%@ include file="include/left.jsp" %>
		<div class="span7" style="margin-top:10px;border-left:1px solid #ccc">
		  <div>
			  <img alt="" src="../img/all.png"><span id="show" style="margin-left:120px;">发言请遵守社区公约，还可以输入<h1 id="number" style="color:#ff7400;;display:inline;font-family: Constantia, Georgia;">140</h1>字</span>
						<span id="show2" style="display:none;margin-left:120px;">发言请遵守社区公约，您已经超出<h1 id="chao" style="color:red;display:inline;font-family: Constantia, Georgia;"></h1>字</span>
				<div class="wall">
					
						<textarea autocomplete="off" id="area" name="content" style="width:500px;height:90px;" class="atwho"></textarea>
						<img alt="" src="showimg.img?n=${user.pic }" style="width:100px;height:100px;margin-left:20px;">
						<div style="margin-left:450px;">
							<a href="#" class="btn btn-large disabled" id="hide">发布</a>
							<button class="btn btn-large btn-danger" id="btn" style="display:none;">发布</button>
						</div>
					
				</div>
			</div>
			
			
			<div id="test" style="border-left:1px #ccc solid;border-right:1px #ccc solid;">
			
			<c:if test="${not empty newstatemes }">
				<div class="alert alert-success">
	              <button type="button" class="close" data-dismiss="alert">×</button>
	              <strong>${newstatemes }</strong>
	            </div>
	            <%
	            	request.getSession().removeAttribute("newstatemes");
	            %>
			</c:if>
			
					<c:if test="${empty page.list }">
						<h3 style="color:red" id="not">还没有任何人发表新鲜事哦！赶紧留下你的脚丫吧！！</h3>
					</c:if>
					<c:forEach items="${page.list }" var="s">
						<div class="media" style="margin-top:10px;border-top:1px #0088cc solid;">
						
						
						
						
						
							<a class="pull-left" href="javascript:;" style="margin-left:10px;margin-right:10px;margin-top:10px;">
			                <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px;" src="showimg.img?n=${s.createuser.pic }">
			              </a>
			              <div class="media-body">
			                <h3 class="media-heading" style="margin-left:100px;">${s.createuser.username }</h3>
			                 <span style="margin-left:10px;">${s.content }</span>
			              </div>
			              <div style="float:right;margin-right:20px;">
			              	<a style="margin-right:40px;color:#ff7400" href="javascript:;" title="${s.createtime }">${s.time }</a>
			              	<a href="javascript:0;" id="mya${s.id }">评论</a>
			              </div>
			              
			              <div style="clear:both;">
			            	
			            </div>
			            <!-- huifu -->
			            
			              <form action="savereplay.jspx" method="post" id="f${s.id }" style="float:right;margin-right:10px;margin-top:10px;display:none">
			              		对楼主的回复：<input autocomplete="off" type="text"class="span3 atwho" id="replay${s.id }" name="huifucontent"><br/>
			              		<input type="hidden" value="${s.id }" name="huifufid" >
			              		<input type="hidden" value="${s.createuser.id }" name="replaywhoid">
			              		<button type="submit" class="btn-success" style="float:right;margin-right:20px;" id="sub${s.id }">回复</button>
			              		<a href="javascript:;" style="float:right;margin-right:20px;" id="quxiao${s.id }">取消</a>
			              </form>
						
			              
			              
			              
			              <!-- gentie -->
			              <c:forEach items="${s.replaylist }" var="v">
			              
			              	  <div style="margin-left:290px;background-color:#e6e6e6;border:1px #ffffff solid;">
			              	  	
				              		<img alt="" src="showimg.img?n=${v.createuser.pic }" style="width:30px;height:30px;margin-top:10px;margin-left:10px;">
				              		<div style="width:300px;float:right;margin-right:10px;margin-top:10px;">
				              			<a href="javascript:;">${v.createuser.username }</a>&nbsp;回复&nbsp;<a href="javascript:;">${v.replaywho.username }</a>：${v.content }　　(<span style="width:30px;color:red;">${v.time }</span>)<br/>
				              			<a href="javascript:;" style="margin-left:200px;" id="r${v.id }">回复</a>
				              		</div>
				              		
				              		<!-- huifu2 -->
				              		<form action="savereplay.jspx" method="post" id="re${v.id }" style="float:right;margin-right:10px;margin-top:10px;display:none;">
						              		对<a href="javascript:;">${v.createuser.username }</a>回复：<input autocomplete="off" type="text"class="span3 atwho" id="replay${s.id }" name="huifucontent"><br/>
						              		<input type="hidden" value="${s.id }" name="huifufid">
						              		<input type="hidden" value="${v.createuser.id }" name="replaywhoid">
						              		<button type="submit" class="btn-success" style="float:right;margin-right:20px;" id="sub${s.id }">回复</button>
						              		<a href="javascript:;" style="float:right;margin-right:20px;" id="quxiao${v.id }">取消</a>
						              </form>
				              		<a href="javascript:;" style="margin-left:320px;"></a>
				              		
				              		 
				              </div>
			              	
			              </c:forEach>
			             
			              
			            </div>
			            <div style="clear:both;">
			            	
			            </div>
					</c:forEach>
						
				
			</div>
			
			<div style="margin-top:30px;"></div>
            
            <%@ include file="include/page.jsp" %>
            
            <div style="margin-buttom:70px;">
            	
            </div>
            
            
            


		</div>
		<!-- right -->
		<%@ include file="include/right.jsp" %>
	  </div>
	</div>
	<script type="text/tempstate" id="tempstate">
<div class="media" style="margin-top:10px;border-top:1px #0088cc solid;">
		<a class="pull-left" href="javascript:;" style="margin-left:10px;margin-right:10px;margin-top:10px;">
			                <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px;" src="showimg.img?n={{pic}}">
			              </a>
			              <div class="media-body">
			                <h3 class="media-heading" style="margin-left:100px;">{{username}}</h3>
			                 <span style="margin-left:10px;">{{content}}</span>
			              </div>
			              <div style="float:right;margin-right:20px;">
			              	<a style="margin-right:40px;color:#ff7400" href="javascript:;" title="{{createtime}}">{{viewtime }}</a>
			              	<a href="javascript:0;" id="mya{{id}}">评论</a>
			              </div>
			              
			              <div style="clear:both;">
			            	
			            </div>
			            <!-- huifu -->
			            
			              <form action="savereplay.jspx" method="post" id="f{{id}}" style="float:right;margin-right:10px;margin-top:10px;display:none">
			              		<input type="text"class="span4" id="replay{{id}}" name="huifucontent"><br/>
			              		<input type="hidden" value="{{id}}" name="huifufid">
			              		<input type="hidden" value="{{createuserid}}" name="replaywhoid">
			              		<button type="submit" class="btn-success" style="float:right;margin-right:20px;" id="sub{{id}}">回复</button>
			              		<a href="javascript:;" style="float:right;margin-right:20px;" id="quxiao{{id}}">取消</a>
			              </form>
</div>
	</script>
	<script type="text/javascript" src="../js/jquery.atwho.min.js"></script>
	<script type="text/javascript" src="../js/at.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			
			
			$("#btn").click(function(){
				var content = $("#area").val();
				$.get("savenewstate.jspx?content="+encodeURIComponent(content),function(result){
	  				var temp = $("#tempstate").html();
	  				var show = $("#test").html();
	  				
	  				var t = temp.replace(/{{pic}}/g,result.createuser.pic).replace(/{{username}}/g,result.createuser.username).replace(/{{content}}/g,result.content).replace(/{{createtime}}/g,result.createtime).replace(/{{viewtime }}/g,result.viewcreatetime).replace(/{{id}}/g,result.id).replace(/{{createuserid }}/g,result.createuser.id);
	  				var s = t + show;
	  				$("#test").html(s);
	  				
	  				$("#not").hide();
	  				$("#area").attr("value","");
	  			});
			});
			
			
			/*
				这边作评论的显示用得。。。。
			*/
			
			
			
			<c:forEach items="${page.list }" var="s">
			
					$("#mya${s.id}").click(function(){
						$("#f${s.id}").show();
					});
			
					$("#quxiao${s.id}").click(function(){
						$("#f${s.id}").hide();
					});
			
					
					
					<c:forEach items="${s.replaylist }" var="v">
						$("#r${v.id}").click(function(){
							$("#re${v.id}").show();
						});
						$("#quxiao${v.id}").click(function(){
							$("#re${v.id}").hide();
						});
					
					</c:forEach>
					
			</c:forEach>
		
			
			
			$("#area").blur(function(){
				var text = $("#area").val();
				if(text.length < 140){
					if(text.length == 0){
						$("#hide").show();
						$("#btn").hide();
					}else{
						$("#hide").hide();
						$("#btn").show();
					}
					
					$("#show").show();
					$("#show2").hide();
					$("#number").html(140-text.length);
				}else{
					$("#btn").hide();
					$("#hide").show();
					$("#show2").show();
					$("#show").hide();
					$("#chao").html(text.length - 140);
				}
			});
			$("#area").keyup(function(){
				var text = $("#area").val();
				
				if(text.length < 140){
					if(text.length == 0){
						$("#hide").show();
						$("#btn").hide();
					}else{
						$("#hide").hide();
						$("#btn").show();
					}
					$("#show").show();
					$("#show2").hide();
					$("#number").html(140-text.length);
				}else{
					$("#btn").hide();
					$("#hide").show();
					$("#show2").show();
					$("#show").hide();
					$("#chao").html(text.length - 140);
				}
				
				
			});
			
			
			
			//at的功能
			
			var names = new Array(); 
			var i = 0;
			<c:forEach items="${userlist }" var="v">
				names[i] = "${v.username}";
				i++;
			 </c:forEach>
			 
			 
			var names = $.map(names,function(value,i) {
			    return {'id':i,'name':value,'email':" "};
			});
			
			$(".atwho").atwho('@', {
			    data: names,
			    limit:5
			});
			
		});
	</script>
</body>
</html>